<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="<%=basePath%>/lib/distpicker/distpicker.data.js"  charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath%>/lib/distpicker/distpicker.js"  charset="UTF-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
<style type="text/css">
	#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	.mapContainer{
		width:100%;
	}
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		width: 100%;border-top:1px solid #ecf0f5;
		padding-top: 10px;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	   
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
		margin: 0 auto;
	}
	.sceneList-info{
		padding-top: 10px;
		padding-left: 10px;
	}
	.BMap_cpyCtrl {
	    display: none;
	}
	.p-title{
		padding: 20px 0;
		font-size: 20px;
		margin-left: -50px;
	}
</style>
</head>
<body>
	<div>
		<!--  下方部位  -->
		<div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							<div class="clearfix" style="width: 600px;margin: 0 auto;">
								<div>
									<div class="ml-20" id="form_submit_add" config-option=" url:'/scene',
																			   submit:'.add-Btn',
																			   success:'sunccessReturn' " >
										<div id="form_submit_update"  config-option=" url:'/scene','method':'put',
																			   submit:'.add-Btn',
																			   success:'sunccessReturn' " >
											<div id="detail_get" config-option=" 'url':'/scene?id=$#init-id$',success:'getIdCallBack' ">
												<input id="init-id" type-name="id" type="hidden">
												
												<div class="form-line">
													<div class="float-left" style="width: 48%;  ">
														<span class="red">*</span>&nbsp;<span>Project Name:</span>
														<div class="pb-10 pt-10">
															<input placeholder="Project Name:" validate="empty" type-name="name" class="input input-big" >
														</div>	
													</div>
													<div class="float-left" style="width: 48%;margin-left: 4%;" >
														<span class="red">*</span>&nbsp;<span>Sort in:</span>
													<div class="pb-10 pt-10">
														<input placeholder="Display sequence" value="1" type="number" validate="empty" type-name="seq" class="input input-big" >
													</div>	
													</div>
												</div>
												<div class="form-line">
													<div class="float-left" style="width: 48%;  ">
														<span class="red">*</span>&nbsp;<span>Longitude:</span>
														<div class="pb-10 pt-10">
															<input placeholder="longitude" validate="empty" onclick="showMap()" type-name="lon" class="input input-big input-map" >
														</div>	
													</div>
													<div class="float-left" style="width: 48%;margin-left: 4%;" >
														<span class="red">*</span>&nbsp;<span>Latitude:</span>
														<div class="pb-10 pt-10">
															<input placeholder="latitude" validate="empty" onclick="showMap()" type-name="lat" class="input input-big input-map" >
														</div>
													</div>
												</div>
                                                <div class="form-line">
													<span class="red">*</span>&nbsp;<span>Province and city ：</span>
													<div id="distpicker" style="margin-top: 10px;margin-bottom: 10px">
														<select id="city1" type-name="province" class="input input-big" style="width: 49%;float: left"></select>
														<select id="city2" type-name="city" class="input input-big " style="width: 49%;float: left;margin-left: 10px"></select>
														<input style="display: none"  type-name="province_code" >
														<input style="display: none"  type-name="city_code" >
														<div style="clear: both"></div>
													</div>
												</div>

												<div class="form-line">
													<div class="float-left" style="width: 48%;  ">
														<span>Project Description:</span>
														<div class="pb-10 pt-10">
															<input placeholder="Project description" type-name="description" class="input input-big" >
														</div>	
													</div>
													<div class="float-left" style="width: 48%;margin-left: 4%;" >
														<span>Note:</span>
														<div class="pb-10 pt-10">
															<input placeholder="Note information"  type-name="remark" class="input input-big" >
														</div>	
													</div>
												</div>
												<div class="form-line clearfix  pb-10">
													<button onclick="parent.layer.close(index);" style="background: #aaa;" class="cancel-btn layui-btn ml-20 border-gray float-right">Cancel</button>
													<button class="add-Btn  ml-10 float-right layui-btn layui-btn-normal">Save</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="map_container" class="hide">
			<div  style="height: 350px;width: 100%;">
				<div id="map"></div>
			</div>
		</div>
	</div>
</body>
<style>
	#city .ivu-select-selection{
		height: 46px;
	}
	#city .ivu-select-selection .ivu-select-input{
		line-height: 46px;
		height: 46px;
		font-size: 16px;
	}
	#city .ivu-select-selection .ivu-select-selected-value{
		line-height: 46px;
		height: 46px;
		font-size: 16px;
	}

</style>
<script type="text/javascript">
	function initCity(province,city){
		$("#distpicker").distpicker('destroy');
		$("#distpicker").distpicker({
			placeholder: false,
			province: province,
			city:city
		});
		gic("province_code").val($('#distpicker').find('select').eq(0).find('option:selected').attr('data-code'));
		gic("city_code").val($('#distpicker').find('select').eq(1).find('option:selected').attr('data-code'));
	}
	function getIdCallBack(data) {
		initCity(data.data.province,data.data.city)
		$('#city1').on('change', function(e) {
			gic("province_code").val($('#distpicker').find('select').eq(0).find('option:selected').attr('data-code'));
			gic("city_code").val($('#distpicker').find('select').eq(1).find('option:selected').attr('data-code'));
		})
		$('#city2').on('change', function(e) {
			gic("province_code").val($('#distpicker').find('select').eq(0).find('option:selected').attr('data-code'));
			gic("city_code").val($('#distpicker').find('select').eq(1).find('option:selected').attr('data-code'));
		})

	}

function showMap(){
	openWindow("Map acquisition","#map_container","600px");
	if(! validater.empty( gic("lon").val() ) ){
		// 如果当前已有定位，则将定位显示到地图上
		theLocation2(gic("lon").val(),gic("lat").val());
	}
}

//获取窗口索引
var index = parent.layer.getFrameIndex(window.name); 

function sunccessReturn(){
	// forwardUrl("/iot/app_manager",1000,"保存成功");
	tip("Successful");
	setTimeout(function() {
		// 添加成功
		parent.layer.close(index);
		//parent.location.reload();
		window.parent.reflesh();
	}, 1000);
	
}



$(function(){
	// 初始化url参数
	var id = GetQueryString("id");
	if(validater.empty(id)){
		manual_form_submit($("#form_submit_add"))
	}else{
		$(".p-title").html("Edit item");
		writeVal("init-id",id);
		manual_form_submit($("#form_submit_update"));
		manual_init_detail_get($("#detail_get"));
	}
	
	// 百度地图API功能
	map = new BMap.Map("map");    // 创建Map实例
	map.setMapStyle({
        styleJson: [{
            "featureType": "road",//道路
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        },
        {
            "featureType": "poilabel",//景点
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            } 
        },
        {
            "featureType": "manmade",//学院
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }
        ]
    });
	map.centerAndZoom('南京', 9);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	map.addEventListener("click", showInfo);
	
	function showInfo(e){
		theLocation(e.point.lng , e.point.lat);
	}
	
	function theLocation(lon,lat){
		map.clearOverlays(); 
		var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', new BMap.Size(32, 32), {
		   anchor: new BMap.Size(32, 32)
		});
		var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
			icon: icon
		});
		var new_point = new BMap.Point(lon,lat);
		map.addOverlay(mkr);

		$.ajax({
			url:localUrl+'/baidu/api/geocoder',
			dataType: "json",
			type:'POST',
			data:{
				lat:lat.toString(),
				lon:lon.toString()
			},
			success:function (res) {
				console.log(res) ;
				initCity(res.result.addressComponent.province,res.result.addressComponent.city)
			}
		})

		tip("Mark success");
		gic("lon").val(lon);
		gic("lat").val(lat);
		setTimeout(function() {
			closeAll();
		}, 1000);
	}
	
	$(".cancel-btn").click(function(){
		forwardUrl("/iot/app_manager");
	})
})
var map ;

function theLocation2(lon,lat){
	map.clearOverlays(); 
	var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', new BMap.Size(32, 32), {
	   anchor: new BMap.Size(32, 32)
	});
	var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
		icon: icon
	});
	var new_point = new BMap.Point(lon,lat);
	map.addOverlay(mkr);
	// 如果已有定位，则地图以改中心点居中
	setTimeout(function(){
		map.panTo(new_point);
	},200);
	
}

</script>
</html>